<!DOCTYPE html>
<html lang="en">
    <head>
        <title>太空人表盘</title>
        <meta charset="UTF-8">
        <link href="./assets/css/style.css" rel="stylesheet">
        <script src="./assets/js/timeGeneration.js"></script>
    </head>
    <body>
        <div class="jun-meter">
            <div class="jun-time-h jun-time-h-h" id="hh"></div>
            <div class="jun-time-h jun-time-h-l" id="hl"></div>
            <div class="jun-time-rect"></div>
            <div class="jun-human"></div>
            <div class="jun-time-m jun-time-m-h" id="mh"></div>
            <div class="jun-time-m jun-time-m-l" id="ml"></div>
            <div class="jun-time-s jun-time-s-h" id="sh"></div>
            <div class="jun-time-s jun-time-s-l" id="sl"></div>
            <div class="jun-date" id="date"></div>
            <div class="jun-calendar-date" id="calendarDate"></div>
        </div>
    </body>
    <script>
        function WatchMeter() {
            // 初始化dom
            this._initDom()
            // 更新
            this.update()

            this.date = new TimeGeneration()

        }

        // 修改原型
        WatchMeter.prototype = {
            constructor: WatchMeter,
            // 初始化Dom
            _initDom: function () {
                console.log("go in constructor")
                this.elem = {}
                this.elem.hh = document.getElementById('hh')
                this.elem.hl = document.getElementById('hl')
                this.elem.mh = document.getElementById('mh')
                this.elem.ml = document.getElementById('ml')
                this.elem.sh = document.getElementById('sh')
                this.elem.sl = document.getElementById('sl')
                this.elem.date = document.getElementById('date')
                this.elem.calendarDate = document.getElementById('calendarDate')
            },

            // 更新
            update: function () {
                var _this = this
                setInterval(function () {
                    _this._render(_this.date.getDate(), _this.date.getCalendarDate(), _this.date.getTime())
                }, 1000)
            },

            // 渲染
            _render: function (date, calendarDate, time) {
                this._setNumberImage(this.elem.hh, time[0])
                this._setNumberImage(this.elem.hl, time[1])
                this._setNumberImage(this.elem.mh, time[2])
                this._setNumberImage(this.elem.ml, time[3])
                this._setNumberImage(this.elem.sh, time[4])
                this._setNumberImage(this.elem.sl, time[5])
                this.elem.date.innerText = date[2] + " " + date[0] + "-" + date[1]
                this.elem.calendarDate.innerText = calendarDate
            },

            // 设置数字图片
            _setNumberImage: function (elem, value) {
                elem.style.backgroundImage = "url(./assets/img/" + value + ".svg)";
            },

            // 数字换个样式
            _setNumberImage_2: function (elem, value) {
                var color = "_yellow";
                var classH = elem.classList[0];
                if (classH == "jun-time-h") {
                    color = "_green";
                } else if (classH == "jun-time-m") {
                    color = "_blue";
                } else if (classH == "jun-time-s") {
                    color = "_red";
                }

                elem.style.backgroundImage = "url(./assets/img/" + value + color + ".svg)";
            }
        }

        var myWatchMeter = new WatchMeter()


    </script>

</html>
